<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分析页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{__STATIC_PATH}/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="{__STATIC_PATH}/admin/admin/css/admin.css" />
    <link rel="stylesheet" href="{__STATIC_PATH}/admin/admin/css/admin.dark.css" />
    <link rel="stylesheet" href="{__STATIC_PATH}/admin/admin/css/variables.css" />
    <link rel="stylesheet" href="{__STATIC_PATH}/admin/admin/css/reset.css" />
    <link rel="stylesheet" href="{__STATIC_PATH}/admin/admin/css/other/analysis.css" />
    <style>

    </style>
</head>
<div id="add_table" style="display: none" >
    <div style="padding: 10px" >
        <form class="layui-form" id="user_form" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <input type="hidden" name="id" value="" >
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">姓名 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input" lay-verify="required" >
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">车牌号 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="license_plate_number" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">驾龄 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="driving_experience" id="driving_experience" placeholder="请选择时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">出生年月 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="birth_date" placeholder="请选择时间" id="birth_date" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">联系电话 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="phone_number" placeholder="请输入" autocomplete="off" class="layui-input" lay-verify="phone|required">
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">开始时间 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="employment_time" placeholder="请输入" id="employment_time" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" name="resignation_time" placeholder="请输入" id="resignation_time" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">分成比例 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="share_ratio" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">押金</label>
                    <div class="layui-input-block">
                        <input type="text" name="deposit" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="tips" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="table_submit" id="table_submit" >立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>

    </div>
</div>
<div id="add_alary" style="display: none" >
    <div style="padding: 10px" >
        <form class="layui-form" id="alary_form" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <input type="hidden" name="id" value="" >
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">请选择人员 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <select name="user_id" lay-filter="car_user"   lay-verify="required" >
                            <option value="">请选择</option>
                            {foreach $user as $k=>$v}
                                <option value="{$v['id']}" data-share_ratio="{$v['share_ratio']}" >{$v['name']}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">分成比例 <span style="color: red" ></span></label>
                    <div class="layui-input-block">
                        <input type="text" autocomplete="off" class="layui-input" id="share_ratio" disabled  style="border: none" >
                    </div>

                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">拉货价值 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="total_price" placeholder="请输入拉货价值" autocomplete="off" class="layui-input" lay-verify="required" >
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">预计工资 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="price" placeholder="请输入预计工资" autocomplete="off" class="layui-input" lay-verify="required" >
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-xs6 layui-col-md6">
                    <label class="layui-form-label">日期 <span style="color: red" >*</span></label>
                    <div class="layui-input-block">
                        <input type="text" name="enter_date" id="enter_date" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="salary_submit" id="salary_submit" >立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
        </form>

    </div>
</div>
<body>
    <div class="pear-container">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">当前人数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" id="value1">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg t="1688201011061" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1411" width="200" height="200">
                                    <path
                                        d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
                                        fill="#D8F4EE" p-id="1412"></path>
                                    <path
                                        d="M691.8656 639.1296a257.4592 257.4592 0 0 1-52.736 52.736l60.928 60.928a37.2992 37.2992 0 0 0 52.736-52.736l-60.928-60.928z"
                                        fill="#75E8CD" p-id="1413"></path>
                                    <path
                                        d="M486.4 716.8a230.4 230.4 0 1 0 0-460.8 230.4 230.4 0 0 0 0 460.8z m130.9696-302.5152a16.64 16.64 0 0 1 0.3584 23.5008l-115.84 119.296a16.5376 16.5376 0 0 1-3.84 3.3792 16.64 16.64 0 0 1-22.144-3.5072l-67.328-60.5184-47.232 48.64a16.64 16.64 0 0 1-23.8336-23.168l56.32-57.984a16.6912 16.6912 0 0 1 24.8832-3.072l69.5552 62.5152 105.6-108.7232a16.6144 16.6144 0 0 1 23.5008-0.3584z"
                                        fill="#01C3A3" p-id="1414"></path>
                                    <path
                                        d="M341.257236 436.535528m-7.948259-21.87091l0 0q-7.948258-21.87091-29.819168-13.922652l0 0q-21.87091 7.948258-13.922652 29.819169l0 0q7.948258 21.87091 29.819168 13.922651l0 0q21.87091-7.948258 13.922652-29.819168Z"
                                        fill="#FFFFFF" p-id="1415"></path>
                                    <path
                                        d="M331.4432 370.7392a17.2544 17.2544 0 0 0 29.3888-3.584l5.9648-13.5168a26.112 26.112 0 0 1 14.9504-13.9264l30.1056-10.9312a15.2576 15.2576 0 0 0 8.8832-20.224 15.0272 15.0272 0 0 0-18.4576-8.6016c-47.7696 15.4368-67.0976 29.3888-73.9584 57.5232a15.6672 15.6672 0 0 0 3.1488 13.2608z"
                                        fill="#FFFFFF" p-id="1416"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">离职人数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number"
                                id="value2">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg t="1688201051691" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200">
                                    <path
                                        d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
                                        fill="#D8F4EE" p-id="1561"></path>
                                    <path
                                        d="M257.92 354.304a12.8 12.8 0 0 1 12.8-12.8h51.2a12.8 12.8 0 1 1 0 25.6h-51.2a12.8 12.8 0 0 1-12.8-12.8zM258.048 485.6832a12.8 12.8 0 0 1 12.8512-12.7488l51.2 0.1536a12.8 12.8 0 1 1-0.0768 25.6l-51.2-0.1536a12.8 12.8 0 0 1-12.7488-12.8512zM257.8432 613.5808c0-7.296 5.76-13.184 12.8-13.184l51.2 0.1024c7.0912 0 12.8 5.9392 12.8 13.2096a13.0048 13.0048 0 0 1-12.8256 13.1584l-51.2-0.1024a13.0048 13.0048 0 0 1-12.8-13.184z"
                                        fill="#75E8CD" p-id="1562"></path>
                                    <path
                                        d="M281.6 307.2a51.2 51.2 0 0 1 51.2-51.2h307.2a51.2 51.2 0 0 1 51.2 51.2 51.2 51.2 0 0 1 51.2 51.2v358.4a51.2 51.2 0 0 1-51.2 51.2H332.8a51.2 51.2 0 0 1-51.2-51.2v-76.8h51.2a25.6 25.6 0 0 0 0-51.2h-51.2v-76.8h51.2a25.6 25.6 0 0 0 0-51.2h-51.2v-76.8h51.2a25.6 25.6 0 0 0 0-51.2h-51.2v-25.6z m51.2 409.6c-9.3184 0-18.0736-2.4832-25.6-6.8352V716.8a25.6 25.6 0 0 0 25.6 25.6h358.4a25.6 25.6 0 0 0 25.6-25.6V358.4a25.6 25.6 0 0 0-25.6-25.6v332.8a51.2 51.2 0 0 1-51.2 51.2H332.8z"
                                        fill="#01C3A3" p-id="1563"></path>
                                    <path
                                        d="M358.4 293.2224c0-6.4 5.1968-11.6224 11.6224-11.6224h209.4592a11.648 11.648 0 0 1 0 23.296h-209.4592a11.648 11.648 0 0 1-11.6224-11.6736zM614.4 293.2224a11.648 11.648 0 0 1 23.2704 0 11.648 11.648 0 0 1-23.2704 0z"
                                        fill="#FFFFFF" p-id="1564"></path>
                                    <path
                                        d="M426.7264 401.9712a13.568 13.568 0 0 1 5.8368-17.9456l26.624-13.952a12.8512 12.8512 0 0 1 17.5616 5.7088l18.0224 36.3264-50.3552 25.5488-17.6896-35.6864z m23.552 47.5136l84.7872 170.8544-5.0432 2.6624c-3.8144 1.9968-4.1984 7.296-0.6656 9.5232l55.3472 35.2256c3.5072 2.2272 8.2688-0.256 8.576-4.5056l4.7616-66.7136a5.3248 5.3248 0 0 0-7.9104-5.0432l-5.0176 2.6624-84.48-170.24-50.3552 25.5744z"
                                        fill="#75E8CD" p-id="1565"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">总拉货价值</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style=""
                                id="value3">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                                <svg t="1688201066494" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1709" width="200" height="200">
                                    <path
                                        d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
                                        fill="#D8F4EE" p-id="1710"></path>
                                    <path
                                        d="M349.056 373.2992L461.1072 512l-112.0512 138.7008C311.9872 696.6272 342.4 768 399.0528 768h225.8944c56.6528 0 87.0656-71.3728 49.9968-117.2992L562.8928 512l112.0512-138.7008c37.0688-45.9008 6.656-117.2992-49.9968-117.2992h-225.8944c-56.6528 0-87.0656 71.3984-49.9968 117.2992z m134.2464 123.904l-67.7376-84.4288c-22.2208-27.7248 22.5024-38.9632 54.7328-17.6896 29.1328 19.2 53.5808 18.1504 62.2336 17.7664l2.2272-0.0768c1.1264 0 5.7088-1.1008 12.1344-2.6368 25.9072-6.1952 81.8944-19.584 64.0768 2.6368l-67.7376 84.4544c-15.7952 19.712-44.1344 19.712-59.9296 0z"
                                        fill="#01C99A" p-id="1711"></path>
                                    <path
                                        d="M256 294.4a38.4 38.4 0 0 1 38.4-38.4h435.2a38.4 38.4 0 0 1 0 76.8h-435.2a38.4 38.4 0 0 1-38.4-38.4zM768 729.6a38.4 38.4 0 0 1-38.4 38.4h-435.2a38.4 38.4 0 0 1 0-76.8h435.2a38.4 38.4 0 0 1 38.4 38.4z"
                                        fill="#75E8CD" p-id="1712"></path>
                                    <path
                                        d="M402.7392 614.9632m7.7068-10.219845l42.926877-56.924536q7.7068-10.219845 17.926645-2.513045l0 0q10.219845 7.7068 2.513045 17.926645l-42.926877 56.924536q-7.7068 10.219845-17.926645 2.513045l0 0q-10.219845-7.7068-2.513045-17.926645Z"
                                        fill="#FFFFFF" p-id="1713"></path>
                                    <path
                                        d="M419.824586 634.79804m-7.7068 10.219845l0 0q-7.7068 10.219845-17.926645 2.513044l0 0q-10.219845-7.7068-2.513045-17.926645l0 0q7.7068-10.219845 17.926645-2.513044l0 0q10.219845 7.7068 2.513045 17.926645Z"
                                        fill="#FFFFFF" p-id="1714"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6 layui-col-md3">
                <div class="layui-card top-panel">
                    <div class="layui-card-header">员工工资总数</div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space5">
                            <div class="layui-col-xs8 layui-col-md8 top-panel-number" style=""
                                id="value4">
                                0
                            </div>
                            <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                                <svg t="1688201079590" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="1858" width="200" height="200">
                                    <path
                                        d="M716.8 0H307.2C137.5488 0 0 137.5488 0 307.2v409.6c0 169.6512 137.5488 307.2 307.2 307.2h409.6c169.6512 0 307.2-137.5488 307.2-307.2V307.2c0-169.6512-137.5488-307.2-307.2-307.2z"
                                        fill="#D8F4EE" p-id="1859"></path>
                                    <path
                                        d="M327.936 280.3712a24.3712 24.3712 0 0 1 48.7424 0v48.768a24.3712 24.3712 0 1 1-48.768 0v-48.768z m195.0464 0h-121.9072v73.1392a24.3712 24.3712 0 0 1-24.3968 24.3968H327.936a24.3712 24.3712 0 0 1-24.3712-24.3968v-73.1392h-24.3712A48.768 48.768 0 0 0 230.4 329.1392v390.0928C230.4 746.1632 252.2368 768 279.168 768H644.864c3.0208 0 5.9904-0.256 8.8832-0.8192a146.304 146.304 0 1 1 39.8592-289.7408v-148.3008a48.768 48.768 0 0 0-48.7424-48.768h-24.3968v73.1392a24.3712 24.3712 0 0 1-24.3712 24.3968H547.328a24.3712 24.3712 0 0 1-24.3712-24.3968v-73.1392zM571.7248 256a24.3712 24.3712 0 0 0-24.3712 24.3712v48.768a24.3712 24.3712 0 0 0 48.768 0v-48.768a24.3712 24.3712 0 0 0-24.3968-24.3712z m-292.5568 182.8608c0-6.7328 5.4528-12.1856 12.1856-12.1856h316.928a12.1856 12.1856 0 1 1 0 24.3712h-316.928a12.1856 12.1856 0 0 1-12.1856-12.1856z m12.1856 109.7216a12.1856 12.1856 0 1 1 0-24.3968h170.6752a12.1856 12.1856 0 1 1 0 24.3968H291.328z m-12.1856 85.3248c0-6.7328 5.4528-12.1856 12.1856-12.1856h170.6752a12.1856 12.1856 0 1 1 0 24.3712H291.328a12.1856 12.1856 0 0 1-12.1856-12.1856z"
                                        fill="#01C3A3" p-id="1860"></path>
                                    <path
                                        d="M675.968 742.4a115.2 115.2 0 1 0 0-230.4 115.2 115.2 0 0 0 0 230.4z m25.7024-101.8112l30.208 30.2336a8.704 8.704 0 0 1-12.288 12.3136l-30.2336-30.2336a52.224 52.224 0 1 1 12.3136-12.288z m-7.7568-30.2848a34.816 34.816 0 1 1-69.6576 0 34.816 34.816 0 0 1 69.632 0z"
                                        fill="#75E8CD" p-id="1861"></path>
                                    <path d="M637.568 627.2a12.8 12.8 0 0 1 25.6 0 12.8 12.8 0 1 1-25.6 0z"
                                        fill="#FFFFFF" p-id="1862"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col layui-col-md9">
                                <div style="line-height: 80px;text-align: center;font-size: 36px" >
                                    拉货数据量
                                </div>
                                <div style="line-height: 20px;min-height: 20px" >
                                    <div  class="layui-col layui-col-md6">
                                        起止时间:
                                        <input type="text" class="" id="date_start" style="line-height: 30px; border-radius: 5px;border: 1px solid #ccc;padding-left: 10px;"  >
                                    </div>
                                    <div  class="layui-col layui-col-md6">
                                        <button class="layui-btn layui-btn-success layui-btn-sm" style="float: right"  id="add_caruser_data" >录入数据</button>
                                    </div>

                                </div>
                                <div id="echarts-records" style="height:300px;"></div>
                            </div>
                            <div class="layui-col layui-col-md3" style="max-height: 400px; overflow: auto" >
                                <div style="padding: 40px 0px 0px 50px;">
                                    <div class="layui-timeline" id="salary_list" >

                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md9">
                <div class="layui-col-md12 layui-padding-1" >
                    <div class="layui-col-md10">
                        <div class="layui-col-md3">
                            状态: <select name="" id="car_user_status" class="layui-input" >
                            <option value="" >请选择</option>
                            <option value="1" >在职</option>
                            <option value="2" >离职</option>
                        </select>
                        </div>
                    </div>
                    <div class="layui-col-md2" >
                        <button class="layui-btn layui-btn-success layui-btn-sm" style="float: right"  id="add_user" >添加司机</button>
                    </div>
                </div>
                <table id="user_table" lay-filter=test""></table>
<!--                <div class="layui-card">-->
<!--                    <div class="layui-card-body">-->
<!--                        <dl class="dynamic-status">-->
<!--                            <dd>-->
<!--                                <div class="dynamic-status-img"><a href="javascript:;"><img-->
<!--                                            style="width: 32px;height: 32px;border-radius: 50px;"-->
<!--                                            src="{__STATIC_PATH}/admin/admin/images/avatar.jpg"></a></div>-->
<!--                                <div>-->
<!--                                    <p>就眠儀式 在 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题-->
<!--                                    </p>-->
<!--                                    <span>昨天</span>-->
<!--                                </div>-->
<!--                            </dd>-->
<!--                            <dd>-->
<!--                                <div class="dynamic-status-img"><a href="javascript:;"><img-->
<!--                                            style="width: 32px;height: 32px;border-radius: 50px;"-->
<!--                                            src="{__STATIC_PATH}/admin/admin/images/avatar.jpg"></a></div>-->
<!--                                <div>-->
<!--                                    <p>就眠儀式 在 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题-->
<!--                                    </p>-->
<!--                                    <span>昨天</span>-->
<!--                                </div>-->
<!--                            </dd>-->
<!--                            <dd>-->
<!--                                <div class="dynamic-status-img"><a href="javascript:;"><img-->
<!--                                            style="width: 32px;height: 32px;border-radius: 50px;"-->
<!--                                            src="{__STATIC_PATH}/admin/admin/images/avatar.jpg"></a></div>-->
<!--                                <div>-->
<!--                                    <p>就眠儀式 在 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题-->
<!--                                    </p>-->
<!--                                    <span>昨天</span>-->
<!--                                </div>-->
<!--                            </dd>-->
<!--                            <dd>-->
<!--                                <div class="dynamic-status-img"><a href="javascript:;"><img-->
<!--                                            style="width: 32px;height: 32px;border-radius: 50px;"-->
<!--                                            src="{__STATIC_PATH}/admin/admin/images/avatar.jpg"></a></div>-->
<!--                                <div>-->
<!--                                    <p>就眠儀式 在 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题-->
<!--                                    </p>-->
<!--                                    <span>昨天</span>-->
<!--                                </div>-->
<!--                            </dd>-->
<!--                            <dd>-->
<!--                                <div class="dynamic-status-img"><a href="javascript:;"><img-->
<!--                                            style="width: 32px;height: 32px;border-radius: 50px;"-->
<!--                                            src="{__STATIC_PATH}/admin/admin/images/avatar.jpg"></a></div>-->
<!--                                <div>-->
<!--                                    <p>就眠儀式 在 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">讨论区</a> 回答了 <a style="color: var(&#45;&#45;global-primary-color)"-->
<!--                                            lay-href="https://gitee.com/pear-admin/Pear-Admin-Layui">夏娜</a> 提出得问题-->
<!--                                    </p>-->
<!--                                    <span>昨天</span>-->
<!--                                </div>-->
<!--                            </dd>-->
<!--                        </dl>-->
<!--                    </div>-->
<!--                </div>-->

            </div>
            <div class="layui-col layui-col-md3">
<!--                <div class="layui-card">-->
<!--                    <div class="layui-card-body"-->
<!--                        style="flex-direction: column;height: 160px;display: flex; align-items: center; justify-content: center;">-->
<!--                        <div>-->
<!--                            <svg focusable="false" class="" data-icon="smile" width="6em" height="6em" fill="#16baaa"-->
<!--                                aria-hidden="true" viewBox="64 64 896 896">-->
<!--                                <path-->
<!--                                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"-->
<!--                                    fill="#16baaa"></path>-->
<!--                                <path-->
<!--                                    d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zM288 421a48.01 48.01 0 0196 0 48.01 48.01 0 01-96 0zm224 272c-85.5 0-155.6-67.3-160-151.6a8 8 0 018-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 589.9 461.5 629 512 629s92.1-39.1 95.8-88.6c.3-4.2 3.9-7.4 8.1-7.4H664a8 8 0 018 8.4C667.6 625.7 597.5 693 512 693zm176-224a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"-->
<!--                                    fill="#e6f7ff"></path>-->
<!--                                <path-->
<!--                                    d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm376 112h-48.1c-4.2 0-7.8 3.2-8.1 7.4-3.7 49.5-45.3 88.6-95.8 88.6s-92-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4zm-24-112a48 48 0 1096 0 48 48 0 10-96 0z"-->
<!--                                    fill="#16baaa"></path>-->
<!--                            </svg>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="layui-card">
                    <div class="layui-card-header">
                        寄语
                    </div>
                    <div class="layui-card-body" style="line-height:40px;">
                        原想将澎湃的爱平平稳稳放置你手心，奈何我徒有一股蛮劲，只顾向你跑去，一个不稳跌的满身脏兮兮。试图爬起的我，
                        心想你会不会笑我 " 献爱献的这样笨拙, 怎么不知避开爱里的埋伏 "
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        毒鸡汤
                    </div>
                    <div class="layui-card-body" style="line-height:40px;" id="poisonous" >

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 依 赖 脚 本 -->
    <script src="{__STATIC_PATH}/admin/component/layui/layui.js"></script>
    <script src="{__STATIC_PATH}/admin/component/pear/pear.js"></script>
    <script>
        layui.use(['layer', 'echarts', 'element', 'count', 'laydate', 'table', 'form'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                element = layui.element,
                count = layui.count,
                laydate = layui.laydate,
                table = layui.table,
                form = layui.form,
                echarts = layui.echarts;



            var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');



            function getEchartData(){
                var index = layer.msg('数据加载中...', {
                    icon: 16,
                    time: 0
                })
                $.ajax({
                    url: "/index/caruser/getCarUserByEchart",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        time_interval:$("#date_start").val()
                    },
                    success: function (res) {
                        echartInit(res.result.car_user,res.result.car_user_data, res.result.priceData);
                        $("#value3").html(res.result.carPriceCount ? res.result.carPriceCount.toFixed(2) : 0)
                        $("#value4").html(res.result.priceCount ? res.result.priceCount.toFixed(2) : 0)

                        layer.close(index);
                    }
                })
            }


            const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']


            function echartInit(userData = [], userDataValue = [],priceData = []){
                var option = {
                    tooltip: {
                        // 触发方式：设置为坐标轴触发提示框
                        trigger: "axis",
                        // 设置提示框浮层位置 point: 鼠标位置
                        position: function (point) {
                            return [point[0] - 18, point[1] - 120];
                        },
                        padding: 0,
                        // 提示框浮层内容格式器: 自定义提示框样式
                        formatter: function (params) { // params 是 formatter 需要的数据集
                            let timeStr = $("#date_start").val()
                            let content = "";

                            params.forEach((item, index) => {
                                // 提示框的内容样式及数据
                            content += `<div style="height: 25px; line-height: 25px;">
                              <!-- 圆点样式 -->
                              <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
                              <span style="color: #424864;">${item.axisValue}:</span>
                              <span style="color: #172045;">${item.value}</span>
                            </div>`;
                            content += `<div style="height: 25px; line-height: 25px;">
                              <!-- 圆点样式 -->
                              <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
                              <span style="color: #424864;">预计结算薪资:</span>
                              <span style="color: #172045;">${priceData[userData.indexOf(item.axisValue)].toFixed(2)}</span>
                            </div>`;
                            });
                            // 提示框外框样式及内容数据
                            const htmlContent = `<div style="width: 236px; height: 104px;">
                            <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
                            <div style="color: #000000D9; border-bottom: 1px solid #F0F0F0; padding: 5px 16px;">
                              <span style="font-size: 14px;">${timeStr}</span>
                            </div>
                            <div style="padding: 12px 16px; position: relative;">
                              ${content}
                              <!-- 倒三角形样式 -->
                              <div style="position: absolute; bottom: -14px; left: 12px; width: 0; height: 0; overflow: hidden; border-width: 8px; border-color: #ffffff transparent transparent transparent; border-style: dashed dashed solid dashed;}"></div>
                            </div>
                          </div>`;
                            return htmlContent;
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: userData,
                        splitLine: false
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: false
                    },
                    grid: {
                        x: '50px',
                        y: '50px',
                        x2: '50px',
                        y2: '50px',
                    },
                    series: [
                        {
                            data: userDataValue,
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            itemStyle: {
                                normal: {
                                    color: '#16baaa'
                                },
                            }
                        }
                    ]
                };

                echartsRecords.setOption(option);
            }

            //第一个实例
            table.render({
                elem: '#user_table'
                ,height: 315
                ,url: '/index/caruser/getCaruserList/' //数据接口
                ,page: true //开启分页
                ,where: {
                    status:$("#car_user_status").val()
                }
                ,cols: [[ //表头
                    // {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    {field: 'name', title: '姓名'}
                    ,{field: 'license_plate_number', title: '车牌号', sort: true}
                    ,{field: 'driving_experience', title: '驾龄'}
                    ,{field: 'birth_date', title: '出生年月', templet:function (e) {
                            return e.birth_date == '' ? '' : e.birth_date.split(" ")[0];
                        }}
                    ,{field: 'phone_number', title: '联系电话', sort: true}
                    ,{field: 'employment_time', title: '开始时间', templet:function (e) {
                            return e.employment_time == '' ? '' : e.employment_time.split(" ")[0];
                        }, sort: true}
                    ,{field: 'resignation_time', title: '结束时间', templet:function (e) {
                            return e.resignation_time  ? e.resignation_time.split(" ")[0] : '在职';
                        }}
                    ,{field: 'share_ratio', title: '分成比例', templet:function (e) {
                            return e.share_ratio/100 + '%';
                        }}
                    ,{field: 'deposit', title: '押金', sort: true, templet:function (e) {
                            return e.deposit == '' ? '无' : e.deposit;
                        }}
                    ,{field: 'tips', title: '备注', sort: true}
                    ,{field: '', title: '操作', templet: function (e) {
                            return '<a class="layui-btn layui-btn-xs"  id="edit_table" data-id='+ e.id +' >编辑</a>' +
                                '<a class="layui-btn layui-btn-danger layui-btn-xs" id="del_table"  data-id='+ e.id +' >删除</a>';
                        }}

                ]]
            });



            // setInterval(() => {
            //     echartsRecords.resize();
            // }, 500);

            window.onresize = function () {
                echartsRecords.resize();
            }

            // 创建一个新的 Date 对象，表示当前日期和时间
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要+1，并确保是两位数
            const day = String(now.getDate()).padStart(2, '0'); // 同样确保是两位数

            // 构建格式化的时间字符串
            const formattedDate = `${year}-${month}-${day}`;

            //日期范围选择
            laydate.render({
                elem: '#date_start'
                ,range: '~' //或 range: '~' 来自定义分割字符
                ,value: formattedDate + ' ~ ' + formattedDate
                ,done:function(value, date, endDate){
                    getEchartData();
                    getSalaryData();
                }
            });

            //日期范围选择
            laydate.render({
                elem: '#driving_experience'
                ,type:'date'
            });
            //日期范围选择
            laydate.render({
                elem: '#birth_date'
                ,type:'date'
            });
            //日期范围选择
            laydate.render({
                elem: '#resignation_time'
                ,type:'date'
            });
            //日期范围选择
            laydate.render({
                elem: '#employment_time'
                ,type:'date'
                ,value: formattedDate
            });//日期范围选择
            laydate.render({
                elem: '#enter_date'
                ,type:'date'
                ,value: formattedDate
            });

            //重绘表格
            $("#car_user_status").change(function(){
                table.reload('user_table', {
                    where: {
                        status:$("#car_user_status").val()
                    }
                });
            });

            //弹出层添加用户
            $("#add_user").click(function(){
                $("input[name='id']").val('');
                var add_table_index = layer.open({
                    type: 1,
                    title: '添加用户',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['60%', '60%'],
                    content: $('#add_table')
                });
            });

            //弹出层添加用户拉货数据量
            $("#add_caruser_data").click(function(){

                layer.open({
                    type: 1,
                    title: '添加拉货数据',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['50%', '50%'],
                    content: $("#add_alary")
                });
            });


            //请求当前有效人数
            getCaruserOkCount();
            function getCaruserOkCount(){
                $.ajax({
                    url: '/index/caruser/getCaruserCount',
                    type: 'POST',
                    data: {
                        status: 1
                    },
                    dataType: 'json',
                    success: function(res) {
                        count.up("value1", {
                            time: 4000,
                            num: res.data,
                            bit: 0,
                            regulator: 50
                        })
                    }
                });
            }
            form.on('submit(table_submit)', function(data){
                let data_json = data.field;
                let url = '';
                if(data_json.id == ''){
                    url = '/index/caruser/addCarUser';
                }else{
                    url = '/index/caruser/editCarUser';
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data_json,
                    dataType: 'json',
                    success: function(res) {
                        if(res.status == 1){
                            layer.closeAll();
                            layer.msg(res.message, {icon: 1, time: 1000});
                            window.location.reload()
                        }
                    }
                });

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            form.on('submit(salary_submit)', function(data){
                let data_json = data.field;
                let url = '';
                if(data_json.id == ''){
                    url = '/index/caruserdata/addCarUserData';
                }else{
                    url = '/index/caruserdata/editCarUserData';
                }
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data_json,
                    dataType: 'json',
                    success: function(res) {
                        if(res.status == 1){
                            layer.closeAll();
                            layer.msg(res.message, {icon: 1, time: 1000});
                            getEchartData();
                            getSalaryData();
                            $('#alary_form')[0].reset()
                        }
                    }
                });

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //编辑表格
            $(document).on('click','#edit_table', function () {
                var id = $(this).attr('data-id');
                $.ajax({
                    url: '/index/caruser/editCarUser',
                    type: 'GET',
                    data: {
                        id: id
                    },
                    dataType: 'json',
                    success: function(res) {
                        $("input[name='name']").val(res.result.name)
                        $("input[name='id']").val(res.result.id)
                        $("input[name='license_plate_number']").val(res.result.license_plate_number)
                        $("input[name='driving_experience']").val(res.result.driving_experience)
                        $("input[name='birth_date']").val(res.result.birth_date)
                        $("input[name='phone_number']").val(res.result.phone_number)
                        $("input[name='tips']").val(res.result.tips)
                        $("input[name='employment_time']").val(res.result.employment_time)
                        $("input[name='resignation_time']").val(res.result.resignation_time)
                        $("input[name='share_ratio']").val(res.result.share_ratio/100)
                        $("input[name='deposit']").val(res.result.deposit)
                        layer.open({
                            type: 1,
                            title: '修改人员数据',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['60%', '60%'],
                            content: $('#add_table')
                        });
                    }
                })

            })
            //删除员工信息
            $(document).on('click','#del_table', function () {
                var id = $(this).data('id');
                layer.confirm('确定删除该人员信息？', {
                    btn: ['确定','取消'] //按钮
                }, function(){

                    $.ajax({
                        url: '/index/caruser/deleteCarUser',
                        type: 'POST',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function(res) {
                            if(res.status == 0){
                                tableReload();
                                getEchartData();
                                getSalaryData();
                            }
                            layer.msg(res.message, {icon: 1, time: 1000});
                        }
                    })
                    tableReload();
                });

            })


            //监听car_user选择
            form.on('select(car_user)', function(data){
                var optionElement = data.elem.options[data.elem.selectedIndex];
                var customAttribute = optionElement.getAttribute('data-share_ratio');
                if(customAttribute){
                    $("#share_ratio").val(customAttribute/100)
                }
                calculateWages()
            });

            $("input[name='total_price']").change(function () {
                calculateWages();
            })
            
            //计算预计工资
            function calculateWages() {
                var share_ratio = $("#share_ratio").val();
                var total_price = $("input[name='total_price']").val();
                var price = 0;
                if(share_ratio && total_price){
                    price = ((share_ratio/100) * total_price).toFixed(2);
                }
                $("input[name='price']").val(price);
            }

            function tableReload(){


                table.reload('user_table', {
                    where: {
                        status:$("#car_user_status").val()
                    }
                });
            }

            //请求当前离职人数
            getCaruserErrorCount();
            function getCaruserErrorCount(){
                $.ajax({
                    url: '/index/caruser/getCaruserCount',
                    type: 'POST',
                    data: {
                        status: 2
                    },
                    dataType: 'json',
                    success: function(res) {
                        count.up("value2", {
                            time: 4000,
                            num: res.data,
                            bit: 0,
                            regulator: 50
                        })
                    }
                });
            }

            getPoisonous_Chicken_Soup();
            //获取随机毒鸡汤
            setInterval(function(){
                getPoisonous_Chicken_Soup();
            },30000)

            function getPoisonous_Chicken_Soup(){
                $.ajax({
                    url: '/index/poisonous/poisonousText',
                    type: 'POST',
                    dataType: 'json',
                    success: function(res) {
                        $("#poisonous").html(res)
                    }
                });
            }

            getSalaryData();

            //获取拉货数据量记录表
            function getSalaryData(){
                $.ajax({
                    url: '/index/caruserdata/getCarUserDataList',
                    type: 'POST',
                    dataType: 'json',
                    data:{
                        time_interval:$("#date_start").val(),
                        page:1
                    },
                    success: function(res) {
                        if(res.status == 1){
                            var str = '';
                            for(var i=0;i<res.result.length;i++){
                                str += ` <div class="layui-timeline-item">
                                            <i class="layui-icon layui-timeline-axis layui-icon-circle"></i>
                                            <div class="layui-timeline-content layui-text">
                                                <div class="layui-timeline-title">${res.result[i].name} 拉货量 ${res.result[i].total_price}元,预计工资 ${res.result[i].price}元<br>录入日期 ${res.result[i].enter_date} &nbsp;   <a class="layui-btn layui-btn-danger layui-btn-xs" id="del_price_info"  data-id="${res.result[i].id}" >删除</a></div>
                                            </div>
                                        </div>`
                            }
                            $("#salary_list").html(str)
                        }else{
                            layer.msg('获取拉货数据列表失败！')
                        }
                    }
                })
            }
            
            $(document).on('click', '#del_price_info', function () {
                var id = $(this).data('id');
                layer.confirm('确定删除？', {
                    btn: ['确定','取消'] //按钮
                }, function(){

                    $.ajax({
                        url: '/index/caruserdata/deleteCarUserData',
                        type: 'POST',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function(res) {
                            getEchartData();
                            getSalaryData();
                            layer.msg(res.message, {icon: 1, time: 1000});
                        }
                    })
                    tableReload();
                });
            })


            setTimeout(function () {
                getEchartData();
            }, 500)
        });
    </script>
</body>

</html>